   vue3学习记录

1：定义数据类型

​	简单数据类型使用：ref(值)  修改值需要.value进行修改

​	复杂数据类型：reactive(值)  直接进行修改

​	语法：const 代理对象 = reactive(源对象)接收一个对象或数组，返回一个代理对象（proxy对象）

​	reactive对比 ref

 从定义数据的角度对比：

​		ref用来定义：基本数据类型

​		reactive用来定义：对象（或数组）类型数据

​		备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象。

从原理角度对比：

ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）

reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。

从使用的角度对比：

ref定义的数据：操作数据需要.value,读取数据时模板中直接读取不需要.value.

reactive定义的数据：操作数据与读取数据：均不需要.value

2：响应式原理

​	vue2的响应式原理  

​		添加设置新数据：this$set() 或者  vue.set()

​		删除数据：this.delete()  或者 vue.delete

vue3的响应式原理:

​		通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。

​		通过Reflect(反射)：对源对象的属性进行操作。

​		const p = new Proxy(person,{

// 有人读取p的某个属性时调用    拦截读取属性

get(target,proName){

return Reflect.get(target,propName)

},

// 有人修改p的某个属性、或给p追加某个属性时调用     拦截设置属性值或者添加新属性

set(target,propName,value){

Reflect.set(target,peopName,value)

}

// 有人删除p的某个属性时调用   拦截删除属性

deleteProperty(target,propName){

return Reflect.deleteProperty(target,propName)

}

})

3:折叠代码： #region     #endregion   

​		                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

